@()(implicit request: play.api.mvc.RequestHeader)
@main("Home") {


	<style>
			.thumbnail {
				height: 250px;
			}

			.thumbnail > .row {
				margin-top: 12px;
			}

			.myFont {
				font-size: 16px;
				margin-left: 5px;
			}

			.panel-default > .panel-heading {
				/*background:transparent;*/
			}

			.myImg {
				width: 25px ;
				vertical-align: middle;
			}

			.myDiv {
				line-height: 2.5em;
				display: flex;
				align-items: center;
			}

			.myTitle {
				font-size: 18px;
			}

			.myHr {
				border-top: 2px solid #002060;
			}

			.myBtn {
				background-color: #002060 ;
			}

			.myBtn:hover {
				background-color: #0D4D79 ;
			}

			div.screenshot img {
				/*height: 300px !important;*/
				width: 100%;
			}

			.carousel-control .fa-prev, .carousel-control .fa-next, .carousel-control .fa-chevron-left, .carousel-control .fa-chevron-right {
				position: absolute;
				top: 50%;
				z-index: 5;
				display: inline-block;
			}

			.carousel-control {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 10%;
				font-size: 20px;
				color: #fff;
				text-align: center;
				text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
				filter: alpha(opacity=50);
				opacity: .5;
			}

			.carousel-caption {
				background-color: #555;
				opacity: 0.8;
				z-index: 1;
				width: 100%;
				bottom: 0px;
				padding-top: 0px;
				right: 30%;
				left: 0%;
				padding-bottom: 0px

			}

			.form-control-feedback {
				right: -30px !important;
			}


	</style>
	<div class="row">
		<div class="col-md-7" style="margin-top: 15px">
			<h3 class="panel-title myTitle" style="margin-top: 0px;
				margin-bottom: 10px">Welcome to RJunBase</h3>
			<hr class="myHr" style="margin-bottom: 15px;
				margin-top: 5px;">
			<div style="height: 275px">
				<p class="text-justify">
					RNA splicing is an essential step of RNA processing for multi-exon genes, in which introns are removed from a newly synthesized precursor RNA producing mature RNAs containing splice junctions. RJunBase is a database for three kinds of RNA splice junctions derived from RNA-seq datasets of different normal and cancerous tissues.
				</p>
				<p class="text-justify">
					RJunBase features the visualization of the splicing pattern at gene level and the expression profile at junction level,
					as well as the demonstration of novel and tumor-specific junctions.
				</p>
				<p class="text-justify">
					RJunBase aims to collect and characterize all RNA splice junctions of human cells. Detection of splice junctions will not only contribute to the characterization of transcript structures but also help to understand cellular and disease phenotypes. RJunBase will aid researchers to decipher tumor heterogeneity at junction level and trigger new splicing-associated target discovery.                </p>
			</div>

			<h3 class="panel-title myTitle" style="margin-top: 20px;
				margin-bottom: 10px">Data Summary</h3>

			<hr class="myHr" style="margin-bottom: 15px;
				margin-top: 5px;">

			<div class="row" style="">
				<div class="col-sm-12">
					<div class="myDiv" style="margin-left: 5px">
						<img class="myImg" src="@routes.Assets.at("images/junctions.png")" style="">
						<span class="myFont"> <a target="_blank" href="@routes.BrowseController.browseBefore()?kind=ls">
							682,017 linear splice junctions</a></span>
					</div>
					<div class="myDiv" style="margin-left: 5px">
						<img class="myImg" src="@routes.Assets.at("images/back_splice.png")" style="">
						<span class="myFont"><a target="_blank" href="@routes.BrowseController.browseBefore()?kind=bs">
							225,949 back-splice junctions</a></span>
					</div>
				</div>
				<div class="col-sm-5">
					<div class="myDiv" style="margin-left: 5px">
						<img class="myImg" src="@routes.Assets.at("images/fusion.png")" style="">
						<span class="myFont"> <a target="_blank" href="@routes.BrowseController.browseBefore()?kind=fs">
							34,733 fusion junctions</a></span>
					</div>
				</div>
				<div class="col-sm-7">
					<div class="myDiv" style="margin-left: 5px">
						<img class="myImg" src="@routes.Assets.at("images/tumor_specific.png")" style="">
						<span class="myFont"> <a target="_blank" href="@routes.BrowseController.browseBefore()?kind=tsj">
							32,837 tumor-specific junctions</a></span>
					</div>
				</div>

				<div class="col-sm-5">
					<div class="myDiv" style="margin-left: 5px">
						<img class="myImg" src="@routes.Assets.at("images/samples.png")" style="">
						<span class="myFont"><a target="_blank" href="@routes.StatisticController.toIndex()">
							29,624 samples</a></span>
					</div>
				</div>
				<div class="col-sm-7">
					<div class="myDiv" style="margin-left: 5px">
						<img class="myImg" src="@routes.Assets.at("images/unannotated.png")" style="">
						<span class="myFont"> <a target="_blank" href="@routes.BrowseController.browseBefore()?kind=unAno">
							324,651 novel / unannotated junctions</a></span>
					</div>
				</div>

			</div>

		</div>
		<div class="col-md-5">

			<form method="post" action="" class="form-inline" id="form"
			style="padding-top: 10px;  margin-bottom: 0px">

				<div class="form-group" style="height: 53px">
					<label class="control-label"></label>
					<div class="input-group" style="margin-left: 0px">
						<input type="text" name="keyword" class="form-control"
						placeholder="gene symbol" id="geneId" style="height: 30px" size="35" required/>
						<span class="input-group-btn">
							<button class="btn btn-primary myBtn" type="button"
							onclick="Home.keywordSearch"
							style="border-top-right-radius: 4px;
								border-bottom-right-radius: 4px;
								height: 30px"><i class="fa fa-search"></i></button>
						</span>
					</div>

				</div>


			</form>

			<div id="myNiceCarousel" class="carousel" data-ride="carousel" style="margin-top: 10px">
					<!-- 轮播项目 -->
				<div class="carousel-inner">
					<div class="item active screenshot">
						<img src="@routes.Assets.at("images/Splicing pattern_Fusion.png")" style="">
						<div class="carousel-caption">
							Splicing pattern-Fusion
						</div>
					</div>
					<div class="item screenshot">
						<img alt="Second slide" style=""
						src="@routes.Assets.at("images/Splicing pattern_Linear Back.png")">
						<div class="carousel-caption">
							Splicing pattern-Linear & Back
						</div>
					</div>
					<div class="item screenshot">
						<img alt="Second slide" style=""
						src="@routes.Assets.at("images/CWF19L1_GTEx-2.png")">
						<div class="carousel-caption">
							Expression profiles-GTEx
						</div>
					</div>
					<div class="item screenshot">
						<img alt="Second slide" style=""
						src="@routes.Assets.at("images/Expression profiles_TCGA.png")">
						<div class="carousel-caption">
							Expression profiles-TCGA
						</div>
					</div>
				</div>
					<!-- 项目切换按钮 -->
				<a class="left carousel-control" href="#myNiceCarousel"
				data-slide="prev"> <span class="fa fa-chevron-left"></span>
				</a> <a class="right carousel-control" href="#myNiceCarousel"
			data-slide="next"> <span class="fa fa-chevron-right"></span>
			</a>
			</div>


			<h4 style="margin-top: 35px">Release Notes&amp;News</h4>

			<ul class="list-unstyled">
				<li><i class="fa fa-chevron-circle-right"></i>
					RJunBase is online. [June 2020]
				</li>
			</ul>

		</div>

	</div>

	<div class="row" style="margin: 15px 0px">
		<div class="page-footer" style="background: transparent;
			font-size: 13px;
			padding: 12px 0px;">
			<div class="col-md-9">
				<div style="text-align: center;
					color: #555">
					Copyright © 2020. All Rights Reserved.
				</div>
			</div>

		</div>
	</div>

	<script>

			$(function () {

				Home.init

			})

	</script>
}
